/**
 * 缺点：不能精细化更新，当修改name后应该只执行依赖name属性的effect，而不应该执行其他的effect
 */

class Dep {
  constructor() {
    this.subscribe = new Set()
  }
  depend() {
    // 这里的activeEffect是下面定义的let activeEffect = null
   if(activeEffect){
    this.subscribe.add(activeEffect)
   }
  }
  notify() {
    this.subscribe.forEach((effect) => {
      effect()
    })
  }
}
const info = { name: 'zs', counter: 3 }
const dep = new Dep()

// 利用watchEffect函数省去dep.addEffect()
// 在外面定义activeEffect的目的是不想依赖 watchEffect(effect)传入的effect，只需要调用dep.depend()就能把effect添加到subscribe中
let activeEffect = null
function watchEffect(effect){
  activeEffect = effect
  dep.depend()
  effect() // 刚添加进来时默认执行一次
  activeEffect = null
}

watchEffect(function doubleCounter() {
  console.log(info.counter * 2)
})
watchEffect(function powerCounter() {
  console.log(info.counter * info.counter)
})

watchEffect(function changename() {
  console.log(info.name)
})

info.counter++
dep.notify()

info.name = 'lilei'
dep.notify()
